<template>
	<view v-if="Object.keys(detailObj).length > 0">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">活动详情</block>
		</cu-custom>

		<view class="solids-bottom bg-white padding-xs flex align-center">
			<view class="flex-sub text-left">
				<view class="solid-bottom text-lg padding">
					<text class="text-black">活动信息</text>
				</view>
				<view class="textin">活动类型：{{ detailObj.type&&aType[detailObj.type]}}</view>
				<view class="textin">活动标题：{{detailObj.name}}</view>
				<view class="textin">地点：{{detailObj.site}}</view>
				<view class="textin">时间范围：{{detailObj.duration.start + " 至 " +detailObj.duration.end}}</view>
			</view>
		</view>

		<view class="solids-bottom bg-white padding-xs flex align-center">
			<view class="flex-sub text-left">
				<view class="solid-bottom text-lg padding">
					<text class="text-black">参与指南</text>
				</view>
				<view class="textin">发起人：{{detailObj.createBy}}</view>
				<view class="textin">联系电话：{{detailObj.phone}}</view>
				<view class="textin">积分：{{detailObj.integral}}</view>
				<view class="textin">需要人数：{{detailObj.peoplenum}}</view>
			</view>
		</view>

		<view class="solids-bottom bg-white padding-xs flex align-center">
			<view class="flex-sub text-left">
				<view class="solid-bottom text-lg padding">
					<text class="text-black">活动说明</text>
				</view>
				<view class="textin">{{detailObj.describe}}</view>
			</view>
		</view>

		<view class="solids-bottom bg-white padding-xs flex align-center">
			<view class="flex-sub text-left">
				<view class="solid-bottom text-lg padding">
					<text class="text-black">其他</text>
				</view>
				<view class="textin">已参与人数：{{nums + ' 人'}} / {{detailObj.peoplenum}}人 - (剩余名额: {{detailObj.peoplenum-nums}})</view>
				<view class="textin" :class="'text-'+ statusColor">活动状态：{{detailObj.status&&statusType[detailObj.status] }}</view>
				<view class="textin">创建时间：{{detailObj.createTime | dateform}}</view>
			</view>
		</view>

		<view class="solids-bottom bg-white padding-xs flex align-center">
			<view class="flex-sub text-left">
				<view class="solid-bottom text-lg padding">
					<text class="text-black">图片</text>
				</view>
				<view class="bg-white padding">
					<view class="grid col-4 grid-square">
						<view class="bg-img" v-for="(item,index) in detailObj.picture" :key="index" :style="[{ backgroundImage:'url(' + item + ')' }]"></view>
					</view>
				</view>
			</view>
		</view>


		<view v-if="detailObj.status===1">
			<view class="padding flex flex-jc" v-if="isCreate">
				<button @tap="confirmAct" class="cu-btn bg-cyan margin-tb-sm lg">结算活动</button>
				<button @tap="modifyAct" class="cu-btn bg-cyan margin-tb-sm lg">修改活动</button>
				<button @tap="cancelAct" class="cu-btn bg-red margin-tb-sm lg">取消活动</button>
			</view>
			<view v-else>
				<view class="solids-bottom bg-white padding-xs flex align-center">
					<view class="flex-sub text-left">
						<view class="solid-bottom text-lg padding">
							<text class="text-black">参与者-信息填写</text>
						</view>
						<view class="cu-form-group">
							<view class="title text-bold">注意事项</view>
							<view class="title text-red" v-if="isFull">本次活动已满员，谢谢大家！</view>
							<view class="title text-green" v-if="!isFull&&!isSign">赶快加入活动吧！</view>
							<view class="title text-orange" v-if="!isFull&&isSign">您当前已加入！</view>
						</view>
						<view class="cu-form-group">
							<view class="title">姓名</view>
							<input v-model="name" name="input"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">手机号码</view>
							<input v-model="phone" type="number" name="input"></input>
							<view class="cu-capsule radius">
								<view class='cu-tag bg-blue '>
									+86
								</view>
								<view class="cu-tag line-blue">
									中国大陆
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="padding flex flex-jc">
					<button @tap="joinAct" :disabled="isFull || isSign" class="cu-btn bg-red margin-tb-sm lg">参加活动</button>
					<button @tap="quitAct" :disabled="!isSign" class="cu-btn bg-red margin-tb-sm lg">退出活动</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	const {
		request,
	} = require('@/utils/t-request.js');
	export default {
		data() {
			return {
				id: "",
				detailObj: {},
				aSign: [],
				nums: 0,
				statusType: ['全部活动', '举办中', '已举办', '未举办'],
				aType: ['官方活动', '个人活动']
			}
		},
		computed: {
			isCreate: (state) => {
				if (uni.getStorageSync('openid') === state.detailObj.openid) {
					return true
				} else {
					return false
				}
			},
			isSign: (state) => {
				// 为true-disabled，不能点击
				return state.aSign.length > 0 ? true : false;
			},
			isFull: (state) => {
				// 为true-disabled，不能点击
				return state.nums >= state.detailObj.peoplenum ? true : false;
			},
			statusColor: (state)=> {
				let colorStr = 'black'
				if(state.detailObj.status>1) {
					if(state.detailObj.status>2) {
						colorStr= 'red'
					}else {
						colorStr= 'green'
					}
				}else{
					colorStr= 'yellow'
				}
				
				return colorStr
			}
		},
		methods: {
			joinAct() {
				if (!this.name) return;
				if (!this.phone) return;
				request({
					url: "/users/join-act",
					method: 'POST',
					data: {
						id: this.detailObj._id,
						obj: {
							openid: uni.getStorageSync('openid'),
							name: this.name,
							phone: this.phone,
							pic: uni.getStorageSync('avatarUrl')
						}
					}
				}).then(res => {
					uni.switchTab({
						url: '/pages/home/home'
					})
				})
			},
			quitAct() {
				request({
					url: "/users/quit-act",
					method: 'POST',
					data: {
						id: this.detailObj._id,
						obj: this.aSign[0]
					}
				}).then(res => {
					uni.switchTab({
						url: '/pages/home/home'
					})
				})
			},
			cancelAct() {
				request({
					url: "/users/cancel-act",
					method: 'POST',
					data: {
						id: this.detailObj._id
					}
				}).then(res => {
					uni.switchTab({
						url: '/pages/home/home'
					})
				})
			},
			confirmAct() {
				if (this.nums) {
					uni.navigateTo({
						url: `/pages/home/settlement?id=${this.detailObj._id}`
					})
				} else {
					uni.showToast({
						duration: 500,
						title: '当前没有人参与,无法结算积分',
						icon: 'none'
					})
				}
			},
			modifyAct() {
				uni.navigateTo({
					url: `/pages/home/reg?type=modify&id=${this.detailObj._id}`
				});
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		mounted() {

			request({
				url: "/users/get-act-byid",
				method: 'POST',
				data: {
					id: this.id
				}
			}).then(res => {
				this.detailObj = res.data.obj;
				this.aSign = res.data.aSign;
				this.nums = res.data.nums;
			});

		}
	}
</script>

<style>
	.textin {
		text-indent: 2em;
	}

	.flex-jc {
		justify-content: space-around;
	}
</style>
